<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能工业数据采集与分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }
        .sidebar {
            background-color: #2c3e50;
            color: white;
            min-height: 100vh;
            position: fixed;
        }
        .sidebar a {
            color: #ecf0f1;
            display: block;
            padding: 12px 15px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        .sidebar a:hover {
            background-color: #34495e;
        }
        .sidebar a.active {
            background-color: #16a085;
        }
        .content {
            margin-left: 250px;
            padding: 20px;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-green {
            background-color: #27ae60;
        }
        .status-yellow {
            background-color: #f39c12;
        }
        .status-red {
            background-color: #e74c3c;
        }
        .badge-alarm {
            background-color: #e74c3c;
            animation: pulse 1.5s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
        .data-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            border-radius: 8px;
            background-color: white;
            margin-bottom: 15px;
        }
        .data-label {
            font-size: 14px;
            color: #7f8c8d;
        }
        .data-value {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }
        .data-unit {
            font-size: 16px;
            color: #95a5a6;
        }
        .maintenance-level {
            height: 20px;
            background-color: #ecf0f1;
            border-radius: 10px;
            overflow: hidden;
        }
        .maintenance-progress {
            height: 100%;
            transition: width 1s ease-in-out;
        }
        .progress-low {
            background-color: #27ae60;
        }
        .progress-medium {
            background-color: #f39c12;
        }
        .progress-high {
            background-color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="sidebar" style="width: 250px;">
        <div class="sidebar-header p-4 text-center">
            <h4><i class="fa fa-industry"></i> 工业数据系统</h4>
        </div>
        <div class="sidebar-menu">
            <a href="/" class="active"><i class="fa fa-dashboard mr-2"></i> 仪表盘</a>
            <a href="/dashboard"><i class="fa fa-bar-chart mr-2"></i> 数据监控</a>
            <a href="/alarms"><i class="fa fa-bell mr-2"></i> 报警中心</a>
            <a href="/maintenance"><i class="fa fa-wrench mr-2"></i> 维护管理</a>
            <a href="/reports"><i class="fa fa-file-text mr-2"></i> 报表生成</a>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2>系统仪表盘</h2>
                        <div class="d-flex align-items-center">
                            <span id="connection-status" class="mr-4">
                                <span class="status-indicator status-green"></span>
                                <span>系统正常</span>
                            </span>
                            <span id="current-time">--:--:--</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统状态卡片 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">系统连接状态</h5>
                            <div class="d-flex justify-content-between items-center mt-3">
                                <i id="connection-icon" class="fa fa-plug fa-3x text-success"></i>
                                <div>
                                    <span id="connection-status-text" class="h3">已连接</span>
                                </div>
                            </div>
                            <p class="card-text mt-3 text-sm text-gray-600">
                                最后更新: <span id="last-update">--:--:--</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">未确认报警</h5>
                            <div class="d-flex justify-content-between items-center mt-3">
                                <i class="fa fa-exclamation-triangle fa-3x text-warning"></i>
                                <div>
                                    <span id="unacknowledged-alarms" class="h3 badge-alarm badge">0</span>
                                </div>
                            </div>
                            <p class="card-text mt-3 text-sm text-gray-600">
                                点击查看详情
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">运行时长</h5>
                            <div class="d-flex justify-content-between items-center mt-3">
                                <i class="fa fa-clock-o fa-3x text-info"></i>
                                <div>
                                    <span id="operating-hours" class="h3">1000.0</span>
                                    <span class="text-sm">小时</span>
                                </div>
                            </div>
                            <p class="card-text mt-3 text-sm text-gray-600">
                                设备累计运行时间
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">维护需求</h5>
                            <div class="d-flex justify-content-between items-center mt-3">
                                <i class="fa fa-wrench fa-3x text-primary"></i>
                                <div>
                                    <span id="maintenance-urgency" class="h3">低</span>
                                </div>
                            </div>
                            <div class="maintenance-level mt-3">
                                <div id="maintenance-progress" class="maintenance-progress progress-low" style="width: 10%;"></div>
                            </div>
                            <p class="card-text mt-1 text-sm text-gray-600">
                                维护指数: <span id="maintenance-score">10.0%</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 智能建议卡片 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card bg-light">
                        <div class="card-body">
                            <div class="d-flex items-center mb-3">
                                <i class="fa fa-lightbulb-o text-yellow-500 mr-2"></i>
                                <h5 class="card-title">AI智能维护建议</h5>
                            </div>
                            <div id="maintenance-recommendations">
                                <p>设备状态良好，继续正常运行和定期检查</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 传感器数据卡片 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">温度传感器数据</h5>
                            <div class="data-grid">
                                <div class="data-card">
                                    <div>
                                        <div class="data-label">温度传感器1</div>
                                        <div class="data-value"><span id="temp1-value">45.0</span> <span class="data-unit">℃</span></div>
                                    </div>
                                    <div id="temp1-status" class="status-indicator status-green"></div>
                                </div>
                                <div class="data-card">
                                    <div>
                                        <div class="data-label">温度传感器2</div>
                                        <div class="data-value"><span id="temp2-value">43.0</span> <span class="data-unit">℃</span></div>
                                    </div>
                                    <div id="temp2-status" class="status-indicator status-green"></div>
                                </div>
                                <div class="data-card">
                                    <div>
                                        <div class="data-label">DS18B20温度</div>
                                        <div class="data-value"><span id="ds18b20-value">42.5</span> <span class="data-unit">℃</span></div>
                                    </div>
                                    <div id="ds18b20-status" class="status-indicator status-green"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">压力与振动传感器数据</h5>
                            <div class="data-grid">
                                <div class="data-card">
                                    <div>
                                        <div class="data-label">压力传感器1</div>
                                        <div class="data-value"><span id="pressure1-value">5.0</span> <span class="data-unit">bar</span></div>
                                    </div>
                                    <div id="pressure1-status" class="status-indicator status-green"></div>
                                </div>
                                <div class="data-card">
                                    <div>
                                        <div class="data-label">压力传感器2</div>
                                        <div class="data-value"><span id="pressure2-value">4.8</span> <span class="data-unit">bar</span></div>
                                    </div>
                                    <div id="pressure2-status" class="status-indicator status-green"></div>
                                </div>
                                <div class="data-card">
                                    <div>
                                        <div class="data-label">振动传感器1</div>
                                        <div class="data-value"><span id="vibration1-value">1.5</span> <span class="data-unit">V</span></div>
                                    </div>
                                    <div id="vibration1-status" class="status-indicator status-green"></div>
                                </div>
                                <div class="data-card">
                                    <div>
                                        <div class="data-label">振动传感器2</div>
                                        <div class="data-value"><span id="vibration2-value">1.3</span> <span class="data-unit">V</span></div>
                                    </div>
                                    <div id="vibration2-status" class="status-indicator status-green"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 报警状态卡片 -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">当前报警状态</h5>
                            <div class="row">
                                <div class="col-md-3 text-center">
                                    <div class="alert-icon mb-2"><i id="temp-alarm-icon" class="fa fa-thermometer-full fa-2x text-green"></i></div>
                                    <p>温度报警</p>
                                    <span id="temp-alarm-status" class="text-success">正常</span>
                                </div>
                                <div class="col-md-3 text-center">
                                    <div class="alert-icon mb-2"><i id="pressure-alarm-icon" class="fa fa-tachometer fa-2x text-green"></i></div>
                                    <p>压力报警</p>
                                    <span id="pressure-alarm-status" class="text-success">正常</span>
                                </div>
                                <div class="col-md-3 text-center">
                                    <div class="alert-icon mb-2"><i id="vibration-alarm-icon" class="fa fa-area-chart fa-2x text-green"></i></div>
                                    <p>振动报警</p>
                                    <span id="vibration-alarm-status" class="text-success">正常</span>
                                </div>
                                <div class="col-md-3 text-center">
                                    <div class="alert-icon mb-2"><i id="system-alarm-icon" class="fa fa-cogs fa-2x text-green"></i></div>
                                    <p>系统报警</p>
                                    <span id="system-alarm-status" class="text-success">正常</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近温度趋势图 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">最近温度趋势</h5>
                            <div class="chart-container">
                                <canvas id="temperatureChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}:${seconds}`;
        }
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();

        // 初始化温度趋势图
        let temperatureChart;
        function initTemperatureChart() {
            const ctx = document.getElementById('temperatureChart').getContext('2d');
            
            // 生成模拟数据
            const labels = [];
            const now = new Date();
            for (let i = 10; i >= 0; i--) {
                const time = new Date(now - i * 10 * 60000); // 每10分钟一个点，共11个点
                labels.push(`${time.getHours()}:${String(time.getMinutes()).padStart(2, '0')}`);
            }
            
            // 模拟温度数据
            const temp1Data = [];
            const temp2Data = [];
            const ds18b20Data = [];
            
            for (let i = 0; i < 11; i++) {
                temp1Data.push(45 + Math.random() * 3 - 1.5); // 45±1.5
                temp2Data.push(43 + Math.random() * 2.5 - 1.25); // 43±1.25
                ds18b20Data.push(42.5 + Math.random() * 2 - 1); // 42.5±1
            }
            
            temperatureChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '温度传感器1 (℃)',
                            data: temp1Data,
                            borderColor: '#3498db',
                            backgroundColor: 'rgba(52, 152, 219, 0.1)',
                            tension: 0.4,
                            fill: false
                        },
                        {
                            label: '温度传感器2 (℃)',
                            data: temp2Data,
                            borderColor: '#e74c3c',
                            backgroundColor: 'rgba(231, 76, 60, 0.1)',
                            tension: 0.4,
                            fill: false
                        },
                        {
                            label: 'DS18B20温度 (℃)',
                            data: ds18b20Data,
                            borderColor: '#2ecc71',
                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
                            tension: 0.4,
                            fill: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 35,
                            max: 50
                        }
                    }
                }
            });
        }

        // 更新系统状态
        function updateSystemStatus() {
            fetch('/api/get_status')
                .then(response => response.json())
                .then(data => {
                    // 更新传感器数据
                    document.getElementById('temp1-value').textContent = data.sensors.temperature1.toFixed(1);
                    document.getElementById('temp2-value').textContent = data.sensors.temperature2.toFixed(1);
                    document.getElementById('pressure1-value').textContent = data.sensors.pressure1.toFixed(1);
                    document.getElementById('pressure2-value').textContent = data.sensors.pressure2.toFixed(1);
                    document.getElementById('vibration1-value').textContent = data.sensors.vibration1.toFixed(1);
                    document.getElementById('vibration2-value').textContent = data.sensors.vibration2.toFixed(1);
                    document.getElementById('ds18b20-value').textContent = data.sensors.ds18b20_temp.toFixed(1);

                    // 更新连接状态
                    const connectionStatus = document.getElementById('connection-status');
                    const connectionIcon = document.getElementById('connection-icon');
                    const connectionStatusText = document.getElementById('connection-status-text');
                    
                    if (data.connected) {
                        connectionStatus.innerHTML = '<span class="status-indicator status-green"></span><span>系统正常</span>';
                        connectionIcon.className = 'fa fa-plug fa-3x text-success';
                        connectionStatusText.textContent = '已连接';
                    } else {
                        connectionStatus.innerHTML = '<span class="status-indicator status-red"></span><span>连接断开</span>';
                        connectionIcon.className = 'fa fa-plug fa-3x text-danger';
                        connectionStatusText.textContent = '已断开';
                    }

                    // 更新报警状态
                    updateAlarmStatus(data.alarms);

                    // 更新最后更新时间
                    const lastUpdate = new Date(data.last_update * 1000);
                    const hours = String(lastUpdate.getHours()).padStart(2, '0');
                    const minutes = String(lastUpdate.getMinutes()).padStart(2, '0');
                    const seconds = String(lastUpdate.getSeconds()).padStart(2, '0');
                    document.getElementById('last-update').textContent = `${hours}:${minutes}:${seconds}`;
                })
                .catch(error => {
                    console.error('获取系统状态失败:', error);
                });
        }

        // 更新报警状态
        function updateAlarmStatus(alarms) {
            // 更新温度报警
            if (alarms.temperature) {
                document.getElementById('temp-alarm-icon').className = 'fa fa-thermometer-full fa-2x text-red';
                document.getElementById('temp-alarm-status').className = 'text-danger';
                document.getElementById('temp-alarm-status').textContent = '异常';
                document.getElementById('temp1-status').className = 'status-indicator status-red';
                document.getElementById('temp2-status').className = 'status-indicator status-red';
                document.getElementById('ds18b20-status').className = 'status-indicator status-red';
            } else {
                document.getElementById('temp-alarm-icon').className = 'fa fa-thermometer-full fa-2x text-green';
                document.getElementById('temp-alarm-status').className = 'text-success';
                document.getElementById('temp-alarm-status').textContent = '正常';
                document.getElementById('temp1-status').className = 'status-indicator status-green';
                document.getElementById('temp2-status').className = 'status-indicator status-green';
                document.getElementById('ds18b20-status').className = 'status-indicator status-green';
            }

            // 更新压力报警
            if (alarms.pressure) {
                document.getElementById('pressure-alarm-icon').className = 'fa fa-tachometer fa-2x text-red';
                document.getElementById('pressure-alarm-status').className = 'text-danger';
                document.getElementById('pressure-alarm-status').textContent = '异常';
                document.getElementById('pressure1-status').className = 'status-indicator status-red';
                document.getElementById('pressure2-status').className = 'status-indicator status-red';
            } else {
                document.getElementById('pressure-alarm-icon').className = 'fa fa-tachometer fa-2x text-green';
                document.getElementById('pressure-alarm-status').className = 'text-success';
                document.getElementById('pressure-alarm-status').textContent = '正常';
                document.getElementById('pressure1-status').className = 'status-indicator status-green';
                document.getElementById('pressure2-status').className = 'status-indicator status-green';
            }

            // 更新振动报警
            if (alarms.vibration) {
                document.getElementById('vibration-alarm-icon').className = 'fa fa-area-chart fa-2x text-red';
                document.getElementById('vibration-alarm-status').className = 'text-danger';
                document.getElementById('vibration-alarm-status').textContent = '异常';
                document.getElementById('vibration1-status').className = 'status-indicator status-red';
                document.getElementById('vibration2-status').className = 'status-indicator status-red';
            } else {
                document.getElementById('vibration-alarm-icon').className = 'fa fa-area-chart fa-2x text-green';
                document.getElementById('vibration-alarm-status').className = 'text-success';
                document.getElementById('vibration-alarm-status').textContent = '正常';
                document.getElementById('vibration1-status').className = 'status-indicator status-green';
                document.getElementById('vibration2-status').className = 'status-indicator status-green';
            }

            // 更新系统报警
            if (alarms.system) {
                document.getElementById('system-alarm-icon').className = 'fa fa-cogs fa-2x text-red';
                document.getElementById('system-alarm-status').className = 'text-danger';
                document.getElementById('system-alarm-status').textContent = '异常';
            } else {
                document.getElementById('system-alarm-icon').className = 'fa fa-cogs fa-2x text-green';
                document.getElementById('system-alarm-status').className = 'text-success';
                document.getElementById('system-alarm-status').textContent = '正常';
            }

            // 计算总报警数
            const totalAlarms = Object.values(alarms).filter(alarm => alarm).length;
            document.getElementById('unacknowledged-alarms').textContent = totalAlarms;
        }

        // 更新维护信息
        function updateMaintenanceInfo() {
            // 模拟维护数据
            const maintenanceScore = Math.floor(Math.random() * 30) + 5; // 5-35%之间的随机数
            let urgency = '低';
            let progressClass = 'progress-low';
            
            if (maintenanceScore > 70) {
                urgency = '高';
                progressClass = 'progress-high';
            } else if (maintenanceScore > 30) {
                urgency = '中';
                progressClass = 'progress-medium';
            }
            
            // 更新UI
            document.getElementById('maintenance-score').textContent = `${maintenanceScore.toFixed(1)}%`;
            document.getElementById('maintenance-urgency').textContent = urgency;
            
            const progressBar = document.getElementById('maintenance-progress');
            progressBar.className = `maintenance-progress ${progressClass}`;
            progressBar.style.width = `${maintenanceScore}%`;
            
            // 更新维护建议
            let recommendations = '';
            if (maintenanceScore > 70) {
                recommendations = '<p>建议安排全面检查和预防性维护</p>';
            } else if (maintenanceScore > 30) {
                recommendations = '<p>建议增加检查频率，密切监控设备状态</p>';
            } else {
                recommendations = '<p>设备状态良好，继续正常运行和定期检查</p>';
            }
            
            document.getElementById('maintenance-recommendations').innerHTML = recommendations;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化图表
            initTemperatureChart();
            
            // 初始化系统状态
            updateSystemStatus();
            
            // 初始化维护信息
            updateMaintenanceInfo();
            
            // 定期更新系统状态
            setInterval(updateSystemStatus, 5000);
            
            // 定期更新维护信息
            setInterval(updateMaintenanceInfo, 30000);
        });
    </script>
</body>
</html>